<template>
	<div id="login" :style ="note">
		<Card class="card">
			<p slot="title">明理苑AO系统</p>
			<i-form :model="formItem" ref="formItem" :rules="rule">
				<Form-item prop="studentNumber">
					<Input v-model="formItem.studentNumber">
					<span slot="prepend">账号</span>
				</Input>
			</Form-item>
			<Form-item prop="password">
				<Input @on-keyup.enter="submit('formItem')" v-model="formItem.password" type="password">
				<span slot="prepend">密 码</span>
			</Input>
		</Form-item>
		<Form-item class="lbutton">
			<Button @click="submit('formItem')" class="loginb" type="primary" icon="ios-search">登 录</Button>
		</Form-item>
		<Form-item  class="lbutton">
			<a @click="forget">忘记密码？</a>
		</Form-item>
	</i-form>

</Card>
</div>
</template>

<script>
import login from '@/api/login.js'
import md5 from '@/tools/md5.js'
export default {
	name: 'login',
	data () {
		return {
			note: {
				backgroundImage: `url( ${ require('./../assets/login-bg.jpg') } )`,
				backgroundRepeat: "no-repeat"
			},
			formItem: {
				studentNumber:'',
				password:''
			},
			rule: {
				studentNumber: [
				{ required: true, message: '学号别忘了填啊！', trigger: 'blur' },
				{ type: 'string', min: 10,max:10, message: '学号是十位', trigger: 'blur' }
				],
				password: [
				{ required: true, message: '密码别忘了填啊！', trigger: 'blur' },
				{ type: 'string', min: 6, message: '密码至少六位以上', trigger: 'blur' }
				]
			}
		}
	},
	methods:{
		submit(name){
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.getDate()
				} else {
					this.$Message.error('好好检查一下！');
				}
			})
		},
		forget(){
			this.$Message.warning('忘记了？早干嘛去了，活该！')
		},
		getDate(){
			let sendData={
				studentNumber:this.formItem.studentNumber,
				password:md5(this.formItem.password)
			};
			login.login(sendData)
			.then(data=>{
				this.$router.push({path:'/'})
			})
			.catch(err => {
				this.$Message.error(err);
			})
		}
	},
	mounted:function(){
		let wls = window.localStorage;
		this.formItem.studentNumber=wls.studentNumber
	}
}
</script>

<style lang="css" scoped>
#login{
	width: 100%;
	height: 100%;
	background-size:100% 100%;
}
#login .card{
	width: 400px;
	position: relative;
	left: 50%;
	margin-left: -200px;
	top: 20%
}
#login .card .loginb{
	width: 100%
}
#login .card .lbutton{
	margin-bottom: 5px;
}
</style>